DOM

什麼是DOM

DOM（Document Object Model）是一個用於表示和操作HTML和XML文檔的結構化模型。它將文檔中的每個元素、屬性或文本都視為一個節點，並以此形成一個樹狀結構。這使得開發者能夠以編程方式訪問和修改文檔的內容、結構和樣式。

DOM的特點

結構化：DOM將文檔表示為樹狀結構，方便導航和操作。
動態性：可以通過JavaScript動態修改文檔的內容和結構，而無需重新加載頁面。
跨平台：DOM是一個標準化的接口，能在各種瀏覽器中使用。
標準化: DOM是由W3C(全球資訊網協會)標準化的,確保了跨瀏覽器的一致性。

使用JavaScript修改HTML和CSS

JavaScript可以通過DOM API來操作HTML和CSS，以下是一些常用的方法和屬性：

獲取元素:

1.document.getElementById()
特性：返回文檔中具有特定ID的第一個元素。ID 在文檔中必須唯一。
效能：快速查找，因為ID是唯一的。
返回值：一個元素對象或null。

// 獲取 ID 為 "myElement" 的元素
const myElement = document.getElementById('myElement');
console.log(myElement); // 輸出：<div id="myElement">內容</div> 或 null

2.document.getElementsByClassName()
特性：返回一個活的 HTMLCollection（即如果DOM中的元素變化，集合會自動更新）。
返回值：一組元素，可以透過索引訪問。
效能：對於較大的文檔，可能會比'getElementById'稍慢。

// 獲取所有類別為 "myClass" 的元素
const elements = document.getElementsByClassName('myClass');
console.log(elements); // 輸出：HTMLCollection(2) [div.myClass, div.myClass]

3.document.querySelector()
特性：使用CSS選擇器語法，返回第一個匹配的元素。
返回值：一個元素對象或null（如果未找到）。
靈活性：可以使用多種選擇器，如類、ID、屬性選擇器等。

// 獲取第一個類別為 "myClass" 的元素
const firstElement = document.querySelector('.myClass');
console.log(firstElement); // 輸出：<div class="myClass">內容</div> 或 null

4.document.querySelectorAll()
特性：同樣使用 CSS 選擇器，返回所有匹配的元素，返回NodeList（靜態，變化不會影響結果）。
返回值：一組元素，可以使用'forEach'遍歷。
靈活性：支持複雜的選擇器組合。

// 獲取所有類別為 "myClass" 的元素
const allElements = document.querySelectorAll('.myClass');
console.log(allElements); // 輸出：NodeList(2) [div.myClass, div.myClass]

修改內容:

1.element.innerHTML
特性：可讀可寫，返回或設置元素的 HTML 內容。
安全性：直接操作可能導致XSS（跨站腳本攻擊），應謹慎使用。
效能：設置時會重新解析HTML，對性能有影響。

// 設置某元素的 HTML 內容
const myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '<strong>這是加粗的內容</strong>';
console.log(myDiv.innerHTML); // 輸出：<strong>這是加粗的內容</strong>

2.element.textContent
特性：可讀可寫，返回或設置元素的純文本內容，忽略 HTML 標籤。
安全性：比 innerHTML 更安全，因為不會執行 HTML 內容。
效能：通常更快，因為不需要解析 HTML。

// 設置某元素的文本內容
const myParagraph = document.getElementById('myParagraph');
myParagraph.textContent = '這是純文本內容';
console.log(myParagraph.textContent); // 輸出：這是純文本內容

修改屬性:

1.element.setAttribute()
特性：可以設置任意屬性，包括自定義數據屬性。
靈活性：允許對標準和非標準屬性進行操作。
返回值：無返回值，直接修改元素的屬性。

// 設置圖片的 src 屬性
const myImage = document.getElementById('myImage');
myImage.setAttribute('src', 'image.jpg');
console.log(myImage.getAttribute('src')); // 輸出：image.jpg

2.element.style
特性：用於設置行內 CSS 樣式，直接影響元素的顯示。
靈活性：可以使用 JavaScript 變數和表達式動態設置樣式。
效能：不會導致樣式重排，性能相對較好。

// 設置元素的背景顏色
const myDiv = document.getElementById('myDiv');
myDiv.style.backgroundColor = 'lightblue';
console.log(myDiv.style.backgroundColor); // 輸出：lightblue

添加/刪除元素

1.element.appendChild()
特性：將一個節點添加為指定元素的最後一個子元素。
靈活性：可以添加任何類型的節點，包括文本和其他元素。
返回值：返回添加的節點。

// 創建一個新的段落元素並添加到某個父元素中
const newParagraph = document.createElement('p');
newParagraph.textContent = '這是新增的段落！';
const parentDiv = document.getElementById('parentDiv');
parentDiv.appendChild(newParagraph);
console.log(parentDiv.innerHTML); // 輸出：<p>這是新增的段落！</p>

2.element.removeChild()
特性：從父元素中刪除指定的子元素。
靈活性：可以刪除任何類型的節點。
返回值：返回被刪除的節點。

// 刪除某個元素
const parentDiv = document.getElementById('parentDiv');
const childElement = document.getElementById('childElement');
parentDiv.removeChild(childElement);
console.log(parentDiv.innerHTML); // 輸出：<p>其他段落內容</p>

3.document.createElement()
特性：創建一個新的元素，但不會自動添加到 DOM 中。
靈活性：可以創建任何HTML標籤並動態設置其屬性和內容。
返回值：返回創建的元素對象。

// 創建一個新的按鈕元素
const newButton = document.createElement('button');
newButton.textContent = '點擊我！';
console.log(newButton); // 輸出：<button>點擊我！</button>